<template>
    <view>
        <view class="wodejl-view" @tap="bindShare">分享商品>></view>

        <swiper :indicator-dots="indicatorDots" :autoplay="autoplay" class="carousel-swiper" :interval="interval" :duration="duration" :indicator-active-color="afterColor">
            <block v-for="(item, index) in carouselUrls" :key="index">
                <swiper-item class="carousel-image">
                    <image :src="item" class="carousel-image" mode="scaleToFill" @tap="uploadImage" />
                </swiper-item>
            </block>
        </swiper>
        <view class="commdity-name-type-view">
            <view class="display_flex_between">
                <view class="flex_column commdity-name">
                    <text class="name out_of_range two_row">{{ data.name }}</text>
                    <text :decode="true" class="price">
                        ￥{{ priceAfter }}
                        <text class="score-money" :decode="true">&nbsp;&nbsp;(可用积分等额兑换)</text>
                    </text>
                </view>
                <view class="flex_column collect-in">
					<van-icon name="like-o" :class="'iconfont iconshoucang1 ' + (isCollect ? 'is-collect' : '')"
                        @tap="parseEventDynamicCode($event, isCollect ? 'bindDeleteCollect' : 'bindInsertCollect')"
                        :data-goodsid="data.id"/>
                    <text :class="'shoucang-text ' + (isCollect ? 'is-collect' : 'not-collect')">收藏</text>
                </view>
            </view>
        </view>
        <view class="commodity-detail-view">
            <view class="guige-yunfei guige-view">
                <text class="commodity-detail">{{ specListString ? '已选择' : '' }}规格</text>
                <view class="specifications-line flex_end" @tap="openSpecifications" data-type="car">
                    <view :class="specListString ? 'guige-specListString theme-color' : 'goods-info-specListString'">{{ specListString ? specListString : '未选择商品规格' }}</view>
                    <text class="iconfont iconhtbArrowright02"></text>
                </view>
            </view>
        </view>
        <view class="commodity-detail-view">
            <view class="guige-yunfei">
                <text class="commodity-detail">月销</text>
                <text class="goods-info-specListString guige-specListString" :decode="true">{{ data.latelyMonthlySales }}&nbsp;件</text>
            </view>
        </view>
        <view class="commodity-detail-view">
            <view class="guige-yunfei">
                <text class="commodity-detail">运费</text>
                <text class="goods-info-specListString guige-specListString">免运费</text>
            </view>
        </view>

        <view class="commodity-detail-view">
            <view class="detail-title">
                <view>商品详情</view>
            </view>
            <view class="commodity-detail">
                <text>{{ data.detail ? data.detail : '暂无详情' }}</text>
            </view>
        </view>
        <view class="commdity-image-list">
            <image mode="widthFix" :src="item" class="detail-images" v-for="(item, index) in detailImages" :key="index"></image>
        </view>
        <text style="padding-bottom: 100rpx"></text>
        <view class="shopping-cart-detail">
            <van-action-sheet :show="shoppingCartDialog" @close="close" title="已选商品">
                <view class="content_box">
                    <scroll-view style="height: 55vh" scroll-y>
                        <view class="shoppingCart-item" v-for="(item, index) in shoppingCartList" :key="index">
                            <view class="goodsName-restructure-view">
                                <view class="goodsName out_of_range one_row">{{ item.goodsName }}</view>
                                <view class="restructure out_of_range one_row">{{ item.restructure }}</view>
                            </view>

                            <view class="goodsPrice-number-view">
                                <view class="goodsPrice">￥{{ item.price }}</view>
                                <view class="stepper">
                                    <text class="reduce-class" @tap="bindMinus" :data-cartId="item.id" :data-number="item.number">－</text>
                                    <input disabled type="number" :value="item.number" class="reduce-class" />
                                    <text @tap="bindPlus" class="add-class" :data-num="index + ',' + item.number">＋</text>
                                </view>
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </van-action-sheet>
            <van-action-sheet :show="specificationsDialog" @close="close" title="选择规格">
                <view class="content_box">
                    <view class="goods-info-view">
                        <image :src="data.mainImage" mode="aspectFill" class="commodity-image"></image>
                        <view>
                            <view class="goods-info-name out_of_range one_row">{{ data.name }}</view>
                            <view class="goods-info-specListString">已选：{{ specListString }}</view>
                            <view class="goods-info-price">￥{{ priceAfter }}</view>
                        </view>
                    </view>
                    <scroll-view scroll-y style="height: 52vh">
                        <view class="commdity-name-type-view">
                            <!-- <view class="commdity-name">{{data.name}}</view> -->
                            <view class="commdity-type-item" v-for="(item, key) in specList" :key="key">
                                <view class="commdity-type-name">{{ key }}</view>

                                <radio-group class="radio-group" @change="radioChange" :data-firstIndex="key">
                                    <label
                                        :class="
                                            'group-label theme-border ' +
                                            (!item.stock ? 'disabled-group-label' : '') +
                                            ' ' +
                                            (item.checked ? 'active theme-bg' : 'theme-color-border') +
                                            ' out_of_range one_row'
                                        "
                                        v-for="(item, index) in item"
                                        :key="index"
                                    >
                                        <radio :value="index" :checked="item.checked" :disabled="!item.stock" class="radio" />

                                        {{ item.name }}
                                    </label>
                                </radio-group>
                            </view>
							<van-empty v-if="specList.length <= 0" description="暂无规格"></van-empty>
                        </view>
                    </scroll-view>
                    <view slot="footer">
                        <view class="good-choice-btn theme-bg" @tap="chooseSpecifications">我选好了</view>
                    </view>
                </view>
            </van-action-sheet>
        </view>
        <view class="safe-area shopping-detail-view">
            <view class="top_tips">
                <view v-if="fullPriceReductionIsHidden">满减：{{ fullReductionRuleName }}</view>
            </view>
            <view class="buy-shopping-cart-view">
                <view class="cz-button">
                    <view class="immediate-purchase theme-bg" @tap="openSpecifications" data-type="pay" hover-class="hover-class-public">
                        立即购买(￥{{ fullPriceReductionIsHidden ? fullPriceReduction : data.price }})
                    </view>
                    <view class="add-to-cart theme-color-border" hover-class="hover-class-public" @tap="openSpecifications" data-type="car">加入购物车</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import GlobalConfig from '../../../../utils/global-config';
import https from '../../../../utils/http';
import authService from '../../../../utils/auth';
import toastService from '../../../../utils/toast.service';
import utilHelper from '../../../../utils/util';
import dateHelper from '../../../../utils/date-helper';
//获取应用实例
const app = getApp();
var totalPrice = 0;
var totalNum = 0;
export default {
    data() {
        return {
            carouselUrls: [],
            indicatorDots: true,
            autoplay: true,
            interval: 5000,
            duration: 1000,

            //beforeColor: "white",//指示点颜色,
            afterColor: 'white',

            //当前选中的指示点颜色
            commodityNum: 1,

            totalPrice: 0,
            shoppingCartDialog: false,
            specificationsDialog: false,
            userInfo: app.globalData.loginUserInfo,
            priceDifference: 0,
            shoppingCartList: [],
            chooseType: 'init',
            specList: '',
            specListString: '',
            priceAfter: '',
            fullPriceReduction: '',
            fullPriceReductionIsHidden: '',
            fullReductionRuleName: '',
            winHeight: '',
            fullReductionRuleList: '',

            data: {
                name: '',
                id: '',
                latelyMonthlySales: '',
                detail: false,
                mainImage: '',
                price: ''
            },

            detailImages: '',
            goodsId: '',
            repData: '',
            collectInfo: '',
            isCollect: ''
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        this.autoHeigth();
        //console.log(app.globalData.loginUserInfo)
        this.setData({
            userInfo: app.globalData.loginUserInfo
        });
        this.getCommodityDetails(options.id);
        this.getGoodsCollect(options.id);
        // this.chooseSpecifications();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        radioChange(e) {
            //获取复选框选中的下标值
            var checkValue = e.detail.value;
            //获取第一级分类的下标值
            let firstIndex = e.currentTarget.dataset.firstindex;
            //获取所有分类信息
            let specList = this.specList;
            //console.log(specList)
            //遍历分类信息给第一级分类为false，提交的时候对应各级分类
            for (var j in specList[firstIndex]) {
                specList[firstIndex][j].checked = false;
            }
            //给选中的第二级分类的checked设置为true
            for (var i in checkValue) {
                specList[firstIndex][checkValue[i]].checked = true;
                //console.log(specList[firstIndex][checkValue[i]])
            }

            let price = this.data.price;
            let specListString = '';
            for (let key in specList) {
                for (let keyof in specList[key]) {
                    //console.log(specList[key][keyof].price)
                    if (specList[key][keyof].checked) {
                        price = price + specList[key][keyof].price;
                        specListString = (specListString ? specListString + '/' : specListString) + specList[key][keyof].name;
                    }
                }
            }
            console.log(specListString);
            let totalPrice = price * this.commodityNum;
            let fullPriceReduction = 0;
            let fullReductionRuleName = '';
            let fullPriceReductionIsHidden = false;
            let limitedPrice = 0;
            for (let i = 0; i < this.fullReductionRuleList.length; i++) {
                //console.log(this.data.fullReductionRuleList[i].limitedPrice)
                if (totalPrice >= this.fullReductionRuleList[i].limitedPrice) {
                    if (this.fullReductionRuleList[i].limitedPrice > limitedPrice) {
                        limitedPrice = this.fullReductionRuleList[i].limitedPrice;
                        fullPriceReduction = totalPrice + 0 - this.fullReductionRuleList[i].reducedPrice;
                        fullReductionRuleName = this.fullReductionRuleList[i].name;
                        fullPriceReductionIsHidden = true;
                    }
                }
            }
            this.setData({
                specList: specList,
                specListString: specListString,
                priceAfter: price,
                totalPrice: utilHelper.toFixed(totalPrice, 2),
                fullPriceReduction: utilHelper.toFixed(fullPriceReduction, 2),
                fullPriceReductionIsHidden: fullPriceReductionIsHidden,
                fullReductionRuleName: fullReductionRuleName
            });
        },

        //事件处理函数
        /*点击减号*/
        bindMinus: function (e) {
            toastService.showLoading();
            var that = this;
            let cartId = e.currentTarget.dataset.cartid;
            let number = e.currentTarget.dataset.number;
            //点击减号后,当前商品的数量小于1,就进行删除该商品
            //重新计算被选中的商品的总金额
            totalPrice = 0;
            if (number == 1) {
                toastService.hideLoading();
                toastService.showModal(null, '确定不要这个了吗？', function confirm() {
                    toastService.showLoading();
                    that.updateNumber(cartId, 1, 0, function callback() {
                        totalNum--;
                        if (that.shoppingCartList.length == 1) {
                            that.setData({
                                shoppingCartDialog: false
                            });
                        }
                        that.getShoppingCartList();
                    });
                });
                return;
            }
            this.updateNumber(cartId, 1, 0, function callback() {
                totalNum--;
                that.getShoppingCartList();
            });
        },

        /*点击加号*/
        bindPlus: function (e) {
            toastService.showLoading();
            var that = this;
            let numList = e.currentTarget.dataset.num.split(',');
            let items = this.shoppingCartList;
            totalPrice = 0;
            items[numList[0]].number = Number(numList[1]) + 1; //当前商品的数量+1
            if (items[numList[0]].disable) {
                return;
            }
            this.updateNumber(items[numList[0]].id, 1, 1, function callback() {
                //重新计算被选中的商品的总金额
                totalNum++;
                that.getShoppingCartList();
            });
        },

        updateNumber(id, number, type, callbak) {
            https
                .request('/rest/member/shoppingCart/updateNumber', {
                    id: id,
                    number: number,
                    type: type
                })
                .then((result) => {
                    if (result.success) {
                        callbak();
                    }
                });
        },

        insertShoppingCart(e) {
            // if(!goodsSpecs){
            //   toastService.showToast("请选择规格");
            //   return
            // }
            toastService.showLoading();
            authService.checkIsLogin().then((result) => {
                toastService.hideLoading();
                if (result) {
                    let goodsSpecs = {};
                    let specList = this.specList;
                    for (let key in specList) {
                        for (let keyof in specList[key]) {
                            //拼接查询规格等的json数据格式，查询商品规格等对应的价格
                            if (specList[key][keyof].checked) {
                                goodsSpecs[key] = specList[key][keyof].name;
                            }
                        }
                    }
                    //console.log(goodsSpecs)
                    let data = {
                        goodsId: this.data.id,
                        specList: JSON.stringify(goodsSpecs)
                    };
                    https.request('/rest/member/pointsMall/shoppingCart/insert', data, authService.getToken()).then((result) => {
                        if (result.success) {
                            toastService.showToast('加入购物车成功');
                            this.setData({
                                specificationsDialog: false
                            });
                        }
                    });
                    return;
                }
                app.globalData.checkIsAuth('scope.userInfo');
            });
        },

        goToPay() {
            let self = this;
            authService.checkIsLogin().then((result) => {
                if (result) {
                    self.toPay();
                    return;
                }
                app.globalData.checkIsAuth('scope.userInfo');
            });
        },

        toPay() {
            var data = this.data;
            var specList = this.specList;
            var orderDetail = {};
            var specLists = {};
            var restructure = '';
            //console.log(specList)
            if (data.status == 4) {
                toastService.showToast('商品已售罄');
                return;
            }
            //拼接数据
            for (let key in specList) {
                for (let keyof in specList[key]) {
                    //拼接查询规格等的json数据格式，查询商品规格等对应的价格
                    if (specList[key][keyof].checked) {
                        specLists[key] = specList[key][keyof].name;
                        restructure = (restructure ? restructure + '/' : restructure) + specList[key][keyof].name;
                    }
                }
            }
            //设置和在购物车提交时的数据格式一样
            orderDetail.actualPrice = this.totalPrice;
            orderDetail.packingCharges = 0;
            orderDetail.orderDetailList = [];
            orderDetail.orderDetailList.push({
                goodsId: data.id,
                specList: JSON.stringify(specLists),
                number: this.commodityNum,
                goodsName: data.name,
                restructure: restructure,
                price: this.priceAfter,
                packingCharges: 0
            });
            console.log(orderDetail);
            uni.navigateTo({
                url: '../pay/pay?payType='+this.chooseType+'&orderDetail=' + JSON.stringify(orderDetail)
            });
        },

        autoHeigth() {
            var that = this;
            //获取用户手机系统信息
            uni.getSystemInfo({
                success: function (res) {
                    let winHeight = res.windowHeight; //获取高度
                    //获取class为settlement-view并减去这个高度，自适应scrollview的高度
                    const query = uni.createSelectorQuery();
                    query.select('.shopping-cart-detail').boundingClientRect();
                    query.selectViewport().scrollOffset();
                    query.exec(function (res) {
                        that.setData({
                            winHeight: winHeight - (res[0].height + 5)
                        });
                    });
                }
            });
        },

        closeShoppingCart: function () {
            this.setData({
                shoppingCartDialog: false
            });
        },

        openShoppingCart() {
            authService.checkIsLogin().then((result) => {
                if (result) {
                    if (this.shoppingCartList.length > 0) {
                        this.setData({
                            shoppingCartDialog: this.shoppingCartDialog ? false : true
                        });
                    }
                    return;
                }
                app.globalData.checkIsAuth('scope.userInfo');
            });
        },

        //获取满减规则
        getFullReductionRule(commodityDetails) {
            https
                .request('/rest/pointsMall/fullReductionRule/list', {
                    pageNo: -1,
                    pageSize: 1
                })
                .then((result) => {
                    if (result.success) {
                        let fullPriceReduction = 0;
                        let fullReductionRuleName = '';
                        let fullPriceReductionIsHidden = false;
                        let limitedPrice = 0;
                        let totalPrice = commodityDetails.price + 0;
                        for (let i = 0; i < result.data.records.length; i++) {
                            if (totalPrice >= result.data.records[i].limitedPrice) {
                                if (result.data.records[i].limitedPrice > limitedPrice) {
                                    limitedPrice = result.data.records[i].limitedPrice;
                                    fullPriceReduction = totalPrice - result.data.records[i].reducedPrice;
                                    fullReductionRuleName = result.data.records[i].name;
                                    fullPriceReductionIsHidden = true;
                                }
                            }
                        }
                        this.setData({
                            fullPriceReduction: utilHelper.toFixed(fullPriceReduction, 2),
                            fullReductionRuleName: fullReductionRuleName,
                            fullPriceReductionIsHidden: fullPriceReductionIsHidden,
                            fullReductionRuleList: result.data.records,
                            totalPrice: commodityDetails.price
                        });
                    }
                });
        },

        getCommodityDetails(id) {
            https
                .request('/rest/pointsMall/goods/selectById', {
                    id: id
                })
                .then((result) => {
                    if (result.success && result.data) {
                        //获取商品的详细图片，转换以轮播图的数据格式
                        let carouselUrls = result.data.subImages.split(',');
                        this.carouselUrls = [];
                        for (let i = 0; i < carouselUrls.length; i++) {
                            this.carouselUrls.push(GlobalConfig.ossUrl + carouselUrls[i]);
                        }
                        this.detailImages = [];
                        if (result.data.detailImages) {
                            let detailImages = result.data.detailImages.split(',');
                            for (let i = 0; i < detailImages.length; i++) {
                                this.detailImages.push(GlobalConfig.ossUrl + detailImages[i]);
                            }
                            result.data.mainImage = GlobalConfig.ossUrl + result.data.mainImage;
                        }
                        this.setData({
                            data: result.data,
                            carouselUrls: this.carouselUrls,
                            detailImages: this.detailImages,
                            priceAfter: result.data.price
                        });
                        this.selectByGoodsId(id);
                        this.getFullReductionRule(result.data);
                        this.chooseSpecifications();
                    }
                });
        },
		close(){
			this.setData({
			    specificationsDialog: false,
			    shoppingCartDialog: false
			});
		},
        openSpecifications(e) {
            console.log(e);
            this.setData({
                specificationsDialog: true,
                goodsId: this.data.id,
                chooseType: e.currentTarget.dataset.type
            });
            this.selectByGoodsId(this.data.id);
        },

        selectByGoodsId(goodsId) {
            https.request('/rest/pointsMall/goodsSpecificationOption/selectByGoodsId', {
                    goodsId: goodsId
                }).then((result) => {
                    if (result.success && result.data) {
                        // if(!result.data){
                        //   return;
                        // }
                        //重新设置商品的规格等数据的格式
                        //let goodsSpecs = {};
                        let specList = result.data;
                        let price = this.data.price;
                        let specListString = '';
                        for (let key in specList) {
                            let isChecked = true;
                            for (let keyof in specList[key]) {
                                //拼接查询规格等的json数据格式，查询商品规格等对应的价格
                                specList[key][keyof].checked = false;
                                //设置每个规格的第一个选项为选中，当库存为0时则选中下一个
                                if (specList[key][keyof].stock == 1 && isChecked) {
                                    specList[key][keyof].checked = true;
                                    //选中的规格价钱在商品价钱的基础上累加
                                    price = price + specList[key][keyof].price;
                                    specListString = (specListString ? specListString + '/' : specListString) + specList[key][keyof].name;
                                    isChecked = false;
                                }
                            }
                        }
                        this.setData({
                            specListString: specListString ? specListString : '暂无规格',
                            specList: JSON.stringify(specList) == '{}' ? [] : specList,
                            priceAfter: price
                        });
                    }
                });
        },

        chooseSpecifications(e) {
            toastService.showLoading();
            var _this = this;
            authService.checkIsLogin().then((result) => {
                toastService.hideLoading();
                if (result) {
                    let goodsSpecs = {};
                    let specList = _this.specList;
                    console.log(_this);
                    let price = _this.data.price;
                    for (let key in specList) {
                        for (let keyof in specList[key]) {
                            //拼接查询规格等的json数据格式，查询商品规格等对应的价格
                            if (specList[key][keyof].checked) {
                                goodsSpecs[key] = specList[key][keyof].name;
                                //选中的规格价钱在商品价钱的基础上累加
                                price = price + specList[key][keyof].price;
                            }
                        }
                    }
                    //console.log(goodsSpecs)

                    _this.setData({
                        repData: JSON.stringify(goodsSpecs),
                        specificationsDialog: false
                    });
                    console.log(_this.chooseType);
                    if (this.chooseType == 'pay') {
                        _this.goToPay();
                    } else if (_this.chooseType == 'car') {
                        _this.insertShoppingCart();
                    } else {
                    }
                    toastService.hideLoading();
                    return;
                }
                this.setData({
                    specificationsDialog: false
                });
                app.globalData.checkIsAuth('scope.userInfo');
            });
        },

        insertStore() {
            authService.checkIsLogin().then((result) => {
                if (result) {
                    let goodsSpecs = {};
                    let specList = this.specList;
                    for (let key in specList) {
                        for (let keyof in specList[key]) {
                            //拼接查询规格等的json数据格式，查询商品规格等对应的价格
                            if (specList[key][keyof].checked) {
                                goodsSpecs[key] = specList[key][keyof].name;
                            }
                        }
                    }
                    //console.log(goodsSpecs)
                    let data = {
                        goodsId: this.data.id,
                        specList: JSON.stringify(goodsSpecs),
                        number: this.commodityNum
                    };
                    https.request('/rest/member/shoppingCart/insert', data, authService.getToken()).then((result) => {
                        if (result.success) {
                            toastService.showSuccess('加入成功');
                            //wx.navigateBack(1)
                        }
                    });

                    return;
                }
                app.globalData.checkIsAuth('scope.userInfo');
            });
        },

        businessTap(e) {
            uni.navigateTo({
                url: '../../menu/index/index?id=' + e.currentTarget.dataset.id
            });
        },

        getGoodsCollect(goodsId) {
            https
                .request('/rest/member/pointsMall/goodsCollect/selectByGoodsId', {
                    goodsId: goodsId
                })
                .then((result) => {
                    if (result.success) {
                        this.setData({
                            collectInfo: result.data,
                            isCollect: result.data ? true : false
                        });
                    }
                });
        },

        bindInsertCollect(e) {
            authService.checkIsLogin().then((result) => {
                if (result) {
                    https.request('/rest/member/pointsMall/goodsCollect/insert', {
                            goodsId: e.currentTarget.dataset.goodsid
                        }).then((result) => {
                            if (result.success) {
                                this.setData({
                                    isCollect: true
                                });
                                toastService.showToast('收藏成功');
                            }
                        });
                    return;
                }
                app.globalData.checkIsAuth('scope.userInfo');
            });
        },

        bindDeleteCollect(e) {
            authService.checkIsLogin().then((result) => {
                if (result) {
                    https.request('/rest/member/pointsMall/goodsCollect/delete', {
                            goodsId: e.currentTarget.dataset.goodsid
                        }).then((result) => {
                            if (result.success) {
                                this.setData({
                                    isCollect: false
                                });
                                toastService.showToast('取消成功');
                            }
                        });
                    return;
                }
                app.globalData.checkIsAuth('scope.userInfo');
            });
        },

        bindShare(e) {
            authService.checkIsLogin().then((result) => {
                if (result) {
                    uni.navigateTo({
                        url: '../../../mine/share/index/index?inviterId=' + this.userInfo.id
                    });
                } else {
                    app.globalData.checkIsAuth('scope.userInfo');
                }
            });
        },

        uploadImage() {
            console.log('占位：函数 uploadImage 未声明');
        }
    }
};
</script>
<style>
page {
    height: 100%;
    background: #f5f5f5;
    padding-bottom: 130px;
}

.carousel-swiper {
    margin: 20rpx;
    height: 40vh;
}

.carousel-swiper-item {
    border-radius: 15rpx;
    height: 100%;
}

.carousel-image {
    width: 100%;
    height: 100%;
    border-radius: 15rpx;
}

.commdity-xuanze {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.commodity-detail-view {
    background: white;
    margin: 0rpx 20rpx;
    margin-top: 20rpx;
    padding: 20rpx;
    border-radius: 15rpx;
}

.detail-title {
    font-size: 30rpx;
    line-height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.commodity-detail {
    font-size: 26rpx;
    color: #919191;
    word-wrap: break-word;
}

.specifications-line {
    width: 80%;
}

.shopping-detail-view {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: white;
    box-shadow: -2px 0px 5px 0.5px rgba(0, 0, 0, 0.2);
}

.buy-shopping-cart-view {
    display: flex;
    justify-items: center;
    justify-content: space-between;
    height: 100rpx;
    margin: 20rpx;
}

.immediate-purchase {
    width: 50%;
    font-size: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
    padding: 20rpx;
    border-radius: 40rpx;
}

.add-to-cart {
    width: 50%;
    font-size: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20rpx;
    border-radius: 40rpx;
}

.gwc-iconfont {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.gwc-iconfont .iconfont {
    border-radius: 50%;
    width: 70rpx;
    height: 70rpx;
    line-height: 70rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cz-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*主容器*/
.stepper {
    width: auto;
    height: auto;
}

/*加号和减号*/
.stepper text {
    width: 48rpx;
    height: 48rpx;
    line-height: 48rpx;
}

/*数值*/
.stepper input {
    width: 40px;
}

.money-icon {
    font-size: 30rpx;
    margin-left: 30rpx;
}

.baozhuangfei-class {
    font-size: 24rpx;
    line-height: 40rpx;
    display: flex;
    align-items: center;
}

/* hover-class样式，点击态 */
.hover-class-public {
    opacity: 0.9;
}

.insert-view {
    border-radius: 50%;
    width: 38rpx;
    height: 38rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.shopping-cart-detail {
    position: fixed;
    bottom: 0;
    z-index: 9999;
    width: 100%;
}

.shopping-cart-content {
    width: 100%;
    display: flex;
    align-items: center;
    background: #535257;
    z-index: 9999;
    height: 54px;
}

.shopping-cart-bg {
    background: #535257;
}

.shopping-cart-desc {
    font-size: 24rpx;
    color: #8c8c8e;
}

.shopping-cart-totalPrice {
    display: flex;
    align-items: center;
}

.fullPriceReductionClass {
    color: gainsboro;
    text-decoration: line-through;
    margin-right: 20rpx;
}

.totalPrice {
    color: white;
    font-weight: bold;
}

.full-price-reduction {
    color: white;
    font-weight: bold;
}

.not-full-price-reduction {
    font-size: 28rpx;
    color: #8c8c8e;
}

.fullPriceReductionIsHidden {
    font-size: 28rpx;
}

.content-manjian {
    position: relative;
    top: 0;
    background: #fffadc;
    font-size: 24rpx;
    font-weight: bold;
    text-align: center;
    height: 73px;
    z-index: 9999;
}

.num {
    position: absolute;
    top: -6px;
    right: -10px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 16px;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    background: rgb(240, 20, 20);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
}

.business-recommend-scroll-view {
    height: 269rpx;
    white-space: nowrap;
}

.icon-business-recommend-class {
    width: 100%;
    height: 200rpx;
    border-radius: 15rpx 15rpx 0 0;
}

.business-recommend-title {
    font-size: 34rpx;
    font-weight: bold;
    margin: 20rpx 20rpx 0 20rpx;
}

.business-recommend-scroll-view {
    margin: 20rpx 0rpx;
    background: #fff;
    border-radius: 50rpx;
    height: 100%;
    display: flex;
    align-items: center;
}

.business-recommend-scroll-view scroll-view {
    display: block;
    width: 100%;
}

.business-recommend-items {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.business-recommend-item {
    width: 32%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #f5f5f5;
    border-radius: 15rpx;
    margin: 0 10rpx;
}

.item-two {
    margin: 0 3.5%;
}

.business-recommend-detail-view {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.fullname-class {
    margin-top: 11rpx;
    font-size: 26rpx;
    width: 70%;
}

.engname-class {
    font-size: 24rpx;
    color: #ccc;
    width: 90%;
}

.business-recommend-money-view {
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15rpx 0 10rpx 0;
}

.business-recommend-money {
    font-size: 26rpx;
    font-weight: bold;
}

.plus-view {
    font-size: 28rpx;
    width: 38rpx;
    height: 38rpx;
    line-height: 38rpx;
    text-align: center;
    border-radius: 50%;
    color: white;
}

.settlement-view {
    position: fixed;
    z-index: 999;
    background: white;
    top: 0;
    border-bottom: 6rpx solid #f5f5f5;
}

.goods-info-view {
    display: flex;
    padding-bottom: 20rpx;
    padding-left: 20rpx;
}

.goods-info-name {
    font-size: 30rpx;
    font-weight: bold;
}

.goods-info-specListString {
    color: #6b6b6b;
    font-size: 24rpx;
}

.goods-info-price {
    font-weight: bold;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 32rpx;
    color: #e0583b;
}

.specifications-scroll-view {
    height: 274px;
}

.clearNull {
    font-weight: 700;
    font-size: 15px;
    color: #80858a;
}

.specifications-dialog {
    margin-bottom: 0rpx;
}

.commdity-name-type-view {
    padding: 20rpx;
    background: #fff;
    margin: 0 20rpx;
    border-radius: 15rpx;
}

.commdity-name {
    font-size: 32rpx;
    font-weight: bold;
    line-height: 50rpx;
    width: 85%;
    align-items: flex-start;
}

.commdity-name .name {
    font-size: 30rpx;
}

.commdity-name .price {
    font-size: 32rpx;
    font-weight: bold;
}

.collect-in {
    width: 15%;
}

.commdity-engname {
    font-size: 28rpx;
    line-height: 60rpx;
}

.commdity-type-item {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: 10rpx;
}

.commdity-type-name {
    font-size: 28rpx;
    margin-right: 30rpx;
}

.radio-group {
    width: 80%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    padding: 10rpx;
    background: #fff;
    border-radius: 50rpx;
}

.group-label {
    width: 28%;
    padding: 1%;
    margin: 1%;
    font-size: 26rpx;
    border-radius: 18rpx;
    text-align: center;
}

.disabled-group-label {
    background: #f5f5f5;
    color: #808080;
    border: none;
}

.radio {
    display: none;
}

/* 商品信息 */
.commodity-item-view {
    display: flex;
    flex-direction: column;
    /* margin-bottom: 10rpx; */
    background: white;
    border-radius: 10rpx;
    padding-top: 20rpx;
}

.commodity-type {
    /* line-height: 64rpx; */
    padding: 10rpx 20rpx;
}

.categoryName-view {
    /* width: 35%; */
    font-size: 28rpx;
}

.font-white {
    color: white;
}

.commodity-item {
    display: flex;
    padding: 20rpx 20rpx 0rpx 20rpx;
    align-items: center;
    border-radius: 5rpx;
}

.commodity-image {
    width: 170rpx;
    height: 152rpx;
    border-radius: 8rpx;
    margin-right: 10rpx;
}

.commodity-name-view {
    width: 100%;
    display: flex;
    align-items: center;
}

.line-view {
    background: #b0b0b0;
    width: 100%;
    height: 2rpx;
}

.commodity-name {
    font-size: 28rpx;
    color: #969696;
    font-weight: bold;
}

.commodity-english {
    font-size: 24rpx;
    color: #b0b0b0;
}

.money-view {
    font-size: 30rpx;
    font-weight: bold;
    margin-top: 30rpx;
}

.insert-view {
    border-radius: 50%;
    width: 45rpx;
    height: 45rpx;
    line-height: 45rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.money-insert-view {
    /* width: 100%; */
    position: absolute;
    /* margin-left: 85%;
   margin-top: 10%; */
    margin-top: -10%;
    right: 5%;
}

#space-view {
    height: 20rpx;
    background: white;
}

.now-order-image {
    width: 100%;
    height: 100%;
}

/* 自定义弹出框的最大高度为100%，并设置他的左右上交的border-ric为0 */
.weui-show .weui-half-screen-dialog.extClassShoppingCart {
    max-height: 100vh;
    padding: 0 20rpx;
    position: fixed;
    bottom: 0;
    padding-bottom: 12%;
}

.weui-half-screen-dialog.extClassShoppingCart .weui-half-screen-dialog__ft {
    padding: 20rpx 0;
    position: sticky;
    bottom: 0;
}

.weui-show .weui-half-screen-dialog.extClassShoppingCart .weui-half-screen-dialog__hd {
    padding: 0 20rpx;
}

/* 选择商品规格弹窗 */
.weui-show .weui-half-screen-dialog.extClassSpecifications {
    z-index: 9999999;
}

/* 自定义弹窗样式 */
.weui-show .weui-half-screen-dialog.extClassSpecifications {
    padding: 0 20rpx;
}

.weui-half-screen-dialog.extClassSpecifications .weui-half-screen-dialog__ft {
    padding: 20rpx 0 0 0;
    position: sticky;
    bottom: 0;
}

/* 自定义弹出框的最大高度为100%，并设置他的左右上交的border-ric为0 */
.weui-show .weui-half-screen-dialog.extClassSpecifications {
    max-height: 90vh;
    /* border-radius: 0%; */
}

.weui-show .weui-half-screen-dialog.extClassSpecifications .weui-half-screen-dialog__hd {
    padding: 0 20rpx;
}

.is-end-item {
    padding-bottom: 50px;
}

.theme-other-bg {
    background: #353535;
    color: #5f5e63;
}

.weui-vtabs-bar__item .weui-vtabs-bar__title {
    white-space: normal;
    text-align: center;
}

.evaluate-business-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.evaluate-info-left {
    width: 80%;
    margin: 20rpx 0rpx;
    padding: 0 50rpx;
    border-right: 1rpx solid #f5f5f5;
}

.evaluate-info-right {
    width: 20%;
    padding: 20rpx;
    text-align: center;
}

.business-evaluate {
    display: flex;
    justify-content: space-between;
}

.evaluate-total-score {
    color: #f56427;
    font-size: 40rpx;
    margin-right: 25rpx;
}

.evaluate-total-star {
    color: #4f4f4f;
    font-size: 24rpx;
}

.evaluate-total-num {
    color: #4f4f4f;
    font-size: 35rpx;
}

.view-line {
    height: 20rpx;
    background: #f3f3f3;
}

.evaluate-items {
    padding: 20rpx;
}

.evaluate-item {
    display: flex;
    justify-content: space-between;
    padding-bottom: 30rpx;
    border-bottom: 1rpx solid #f5f5f5;
}

.evaluate-item-detail {
    width: 90%;
}

.evaluate-user-image {
    width: 8%;
    height: 8%;
    border-radius: 50%;
}

.evaluate-itemu-username-time {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.username-detail {
    font-size: 28rpx;
}

.images-url {
    width: 100rpx;
    height: 100rpx;
}

.datetime-detail {
    font-size: 24rpx;
    color: #7d7d7d;
}

.appraise-class-item {
    width: 30rpx;
    height: 30rpx;
}

.pl-dz-class {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: end;
}

.appraise-class-pl-dz {
    margin-left: 10rpx;
}

.pl-dz-view {
    display: flex;
    align-items: center;
    font-size: 26rpx;
    color: #9b9b9b;
}

.navigator-class {
    padding: 15rpx;
    background: white;
}

.invite-wrapper {
    padding: 10rpx;
    height: 200rpx;
}

.invite-image {
    width: 100%;
    height: 100%;
}

.view-line {
    height: 20rpx;
}

.isOutofDeliveryRange {
    opacity: 0.4;
}

.icongouwuche1 {
    font-size: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.good-choice-btn {
    width: 100%;
    text-align: center;
    padding: 20rpx 0;
    border-radius: 15rpx;
    font-size: 28rpx;
    font-weight: bold;
}

.guige-yunfei {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.iconshoucang1 {
    color: #c3c3c3;
    font-size: 45rpx;
}

.is-collect {
    color: #fc7a7c;
}

.shoucang-text {
    font-size: 28rpx;
}

.not-collect {
    color: #c3c3c3;
}
.commdity-image-list {
    padding: 20rpx;
    border-radius: 15rpx;
    padding-bottom: 30%;
    display: flex;
    flex-direction: column;
}

.detail-images {
    width: 100%;
    height: auto;
}

.wodejl-view {
    position: fixed;
    margin-top: 6%;
    right: 0;
    background: linear-gradient(to right, #ff5c57, #fe4646);
    padding: 10rpx 20rpx;
    border-radius: 40rpx 0 0 40rpx;
    color: white;
    font-size: 30rpx;
    z-index: 1;
}

.guige-view {
    padding: 20rpx 0;
}

.guige-specListString {
    font-size: 32rpx;
    font-weight: bold;
}

.score-money {
    font-size: 30rpx;
}
</style>
